<template>
  <div>
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider>
        <a-menu
          theme="dark"
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
          @select="selectData"
        >
          <a-menu-item>
            <a-icon type="appstore" />
            <span>首页</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title">
              <a-icon type="user" />数据管理
            </span>
            <a-menu-item key="1">
              <router-link to="/">用户列表</router-link>
            </a-menu-item>
            <a-menu-item key="2">
              <router-link to="/shopping">商家列表</router-link>
            </a-menu-item>
            <a-menu-item key="3">食品列表</a-menu-item>
            <a-menu-item key="4">订单列表</a-menu-item>
            <a-menu-item key="5">管理员列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="laptop" />添加数据
            </span>
            <a-menu-item key="6">option5</a-menu-item>
            <a-menu-item key="7">option6</a-menu-item>
            <a-menu-item key="8">option7</a-menu-item>
            <a-menu-item key="9">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title">
              <a-icon type="notification" />图表
            </span>
            <a-menu-item key="10">option9</a-menu-item>
            <a-menu-item key="11">option10</a-menu-item>
            <a-menu-item key="12">option11</a-menu-item>
            <a-menu-item key="13">option12</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title">
              <a-icon type="notification" />编辑
            </span>
            <a-menu-item key="14">option9</a-menu-item>
            <a-menu-item key="15">option10</a-menu-item>
            <a-menu-item key="16">option11</a-menu-item>
            <a-menu-item key="17">option12</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub5">
            <span slot="title">
              <a-icon type="notification" />设置
            </span>
            <a-menu-item key="18">option9</a-menu-item>
            <a-menu-item key="19">option10</a-menu-item>
            <a-menu-item key="20">option11</a-menu-item>
            <a-menu-item key="21">option12</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub6">
            <span slot="title">
              <a-icon type="notification" />说明
            </span>
            <a-menu-item key="22">option9</a-menu-item>
            <a-menu-item key="23">option10</a-menu-item>
            <a-menu-item key="24">option11</a-menu-item>
            <a-menu-item key="25">option12</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-input placeholder="请输入店铺名称" v-model="name" style="width: 200px;margin-left:20px;" />
          <a-input placeholder="请输入店铺地址" v-model="address" style="width: 200px;margin-left:20px;" />
          <a-input
            placeholder="请输入店铺介绍"
            v-model="description"
            style="width: 200px;margin-left:20px;"
          />
          <a-input-search
            placeholder="搜索店铺信息"
            style="width: 200px;margin-left:20px;"
            @search="onSearch"
          />
          <a-button type="primary" style="margin-left:20px;" @click="add">添加</a-button>
          <a-button type="primary" style="margin-left:20px;" @click="text">重置</a-button>
        </a-layout-header>
        <a-layout-content :style="{ padding: '24px', background: '#fff', minHeight: '280px' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      address: "",
      description: ""
    };
  },
  methods: {
    selectData(item) {
      console.log(item);
    },
    onSearch(value) {
      this.$store.dispatch("SEARCH_DATA", value);
    },
    add() {
      let jia = {
        name: this.name,
        address: this.address,
        description: this.description
      };
      this.$store.dispatch("ADD_DATA", jia);
      this.name = "";
      (this.address = ""), (this.description = "");
    },
    text() {
      this.$store.dispatch("GOODS_DATA");
    }
  }
};
</script>

<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
</style>